<script setup>
import tabbarData from "@/assets/data/tabbar.js";
import { getAssetURL } from "@/utils/load_assets.js";

const currentIndex = ref(0);
</script>

<template>
  <div class="tab-bar">
    <van-tabbar v-model="currentIndex" active-color="#ff9854">
      <template v-for="(item, index) in tabbarData">
        <van-tabbar-item :to="item.path">
          <span>{{ item.text }}</span>
          <template #icon>
            <img
              v-if="currentIndex !== index"
              :src="getAssetURL(item.image)"
              alt="弘源旅途"
            />
            <img v-else :src="getAssetURL(item.imageActive)" alt="弘源旅途" />
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<style lang="less" scoped>
.tab-bar {
  img {
    height: 26px;
  }

  // :deep()的作用是找到子组件的类，让子组件的类也可以生效（突破scoped）
  // :deep(.van-tabbar-item__icon) {
  //   font-size: 60px;
  // }
}
</style>
